<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicTable @register="registerTable" :resizeHeightOffset="44" />
        </div>
      </div>
    </Content>

    <Detail @register="registerDetail" />
  </div>
</template>

<script setup>
  import { defineOptions, h } from 'vue';

  import { BasicTable, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { useRoute } from 'vue-router';
  import { PAGE } from '@/api/http.js';
  import { getLabel, moveTypeCodeList, moveTypeCodeList2 } from '@/api/ds.js';

  import { useDrawer } from '@/components/Drawer';
  import Detail from './out-in-detail.vue';

  defineOptions({ name: 'StockChangeLog' });

  const route = useRoute();

  const [registerDetail, { openDrawer }] = useDrawer();

  const { stockType = null, goodsSn = null } = route.query;

  const [registerTable] = useTable({
    api: PAGE('/product/productStockChangeLog'),
    beforeFetch: (arg) => Object.assign(arg, { stockType, goodsSn }),
    columns: [
      {
        title: '单据号',
        dataIndex: 'moveCode',
        ellipsis: false,
        customRender: ({ value, record }) =>
          h(
            'a',
            {
              onClick: () => {
                const { moveType, moveCode } = record;
                openDrawer(true, { moveType, moveCode });
              },
            },
            value,
          ),
        width: 200,
      },

      {
        title: '寄存人',
        dataIndex: 'ownerName',
        ellipsis: false,
        ifShow: stockType === 'S',
      },

      {
        title: '变更类型',
        dataIndex: 'moveTypeCode',
        ellipsis: false,
        customRender: ({ value }) =>
          getLabel(stockType === 'S' ? moveTypeCodeList2 : moveTypeCodeList, value),
      },

      {
        title: '变更前数量',
        dataIndex: 'origQty',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },
      {
        title: '变更后数量',
        dataIndex: 'afterQty',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },

      {
        title: '操作人',
        dataIndex: 'employeesName',
        ellipsis: false,
      },

      {
        title: '操作时间',
        dataIndex: 'addTime',
        ellipsis: false,
        width: 190,
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'moveCode',
  });
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }
</style>
